@use "../abstracts/variables" as *;
@use "../abstracts/mixins" as *;
.row {
    max-width:$grid-width;
    // background-color: #eee;
    margin: 0 auto;
    // display: grid;
    // grid-template-columns: repeat(auto-fit, minmax(min(100%, $grid-width / 12), 1fr));

    &:not(:last-child) {
        margin-bottom: $gutter-vertical;
    }

    @include clearfix;

    //给所有col-开头的样式统一添加样式，这样就不需要单独拎出一个样式了
    //匹配符还有*：表示包含，^表示以什么开头
    [class^="col-"] { 
        // background-color: orangered;
        float: left;

        &:not(:last-child) {
            margin-right: $gutter-horizontal;
        }
    }

    .col-1-of-2 {
        width: calc((100% - #{$gutter-horizontal})/2);
    } 

    .col-1-of-3 {
        width: calc((100% - 2*#{$gutter-horizontal})/3);
    }

    .col-1-of-4 {
        width: calc((100% - 3*#{$gutter-horizontal})/4);
    }

    .col-2-of-3 {
        width: calc(2*(100% - 2*#{$gutter-horizontal})/3 + #{$gutter-horizontal});
    }

    .col-2-of-4 {
        width: calc(2*(100% - 3*#{$gutter-horizontal})/4 + #{$gutter-horizontal});
    }

    .col-3-of-4 {
        width: calc(3*(100% - 3*#{$gutter-horizontal})/4 + 2*#{$gutter-horizontal});
    }
}

.row-big {
    max-width:$grid-width-big;
    margin: 0 auto;

    &:not(:last-child) {
        margin-bottom: $gutter-vertical;
    }

    @include clearfix;

    [class^="col-"] { 
        float: left;

        &:not(:last-child) {
            margin-right: $gutter-horizontal-big;
        }
    }

    .col-1-of-2-big {
        width: calc((100% - #{$gutter-horizontal-big})/2);
    } 
}